<template>
  <div class="top">
    <go-back />
    <a-button size="large" danger class="top__btn" @click="goInterview"> 开始本场面试 </a-button>
  </div>
  <div class="btn"></div>
  <a-table :columns="columns" :data-source="data" rowKey="app_user_id" :pagination="false">
    <template #user="{ record, text }">
      <p v-if="record.status === 0">{{ text }}</p>
      <p style="color: red; font-weight: bold" v-else-if="record.status === 1">
        {{ text }}
      </p>
      <p style="color: #999" v-else>{{ text }}</p>
    </template>
    <template #status="{ text }">
      <p v-if="text === 0">未被叫到</p>
      <p style="color: red; font-weight: bold" v-else-if="text === 1">正在进行</p>
      <p style="color: #999" v-else>已结束</p>
    </template>
    <template #action="{ record }">
      <a @click="checkUserDetail(record.app_user_id)">查看用户信息</a>
    </template>
  </a-table>
  <!-- 子组件 -->
  <check-mp-users-detail ref="openUserDetailDrawer" :app_user_id="userId" />
</template>

<script lang="ts">
import { PlusOutlined } from '@ant-design/icons-vue'
import { defineComponent, onMounted, ref, Ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import GoBack from '../../../../components/goback.vue'
import CheckMpUsersDetail from '../../../../components/CheckMpUsersDetail.vue'
import { get } from '../../../../utils/request/request'

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    align: 'center',
    slots: { customRender: 'user' }
  },
  {
    title: '班级',
    dataIndex: 'class_name',
    align: 'center',
    slots: { customRender: 'user' }
  },
  {
    title: '状态',
    dataIndex: 'status',
    align: 'center',
    slots: { customRender: 'status' }
  },
  {
    title: '操作',
    key: 'operation',
    fixed: 'right',
    align: 'center',
    slots: { customRender: 'action' }
  }
]

interface DataItem {
  app_user_id: number
  number: number
  name: string
  class_name: string
  status: number
}

const data: Ref<DataItem[]> = ref([])

// 上面两个按钮
const useBtnEffect = (id: string, title: string, interview_id: string) => {
  const router = useRouter()
  const goInterview = () => {
    router.push({
      name: 'scoreOperate',
      params: {
        id: id,
        title: title
      },
      query: {
        interview_id: interview_id
      }
    })
  }
  return { goInterview }
}

// 表格操作栏相关逻辑
const useTableActionEffect = () => {
  const openUserDetailDrawer = ref()
  const userId = ref<number>()
  const checkUserDetail = (app_user_id: number) => {
    userId.value = app_user_id
    openUserDetailDrawer.value.showDrawer()
  }
  return { openUserDetailDrawer, checkUserDetail, userId }
}

// 网络请求相关逻辑
const useHttpEffect = (token: string) => {
  const getData = async (id: string) => {
    const res: any = await get(`/admin/api/v1/recruitment/interview/batch/${id}/users/sign?page=1&limit=10`, token)
    if (res?.data == null) {
      message.info('没有签到用户')
    }
    data.value = res.data
  }
  return { getData }
}

export default defineComponent({
  components: {
    PlusOutlined,
    GoBack,
    CheckMpUsersDetail
  },
  setup() {
    const route = useRoute()
    const id = route.params.id as string
    const title = route.params.title as string
    const interview_id = route.query.interview_id as string
    const token: string = localStorage.getItem('token') as string
    const { goInterview } = useBtnEffect(id, title, interview_id)
    const { openUserDetailDrawer, checkUserDetail, userId } = useTableActionEffect()
    const { getData } = useHttpEffect(token)
    onMounted(async () => {
      await getData(id)
    })
    return {
      columns,
      data,
      goInterview,
      openUserDetailDrawer,
      checkUserDetail,
      userId
    }
  }
})
</script>

<style lang="less" scoped>
.top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 10px;
  .btn {
    margin: 0 10px;
    padding: 0 20px;
  }
}
</style>
